/*  */
.main-department-container{
    margin-bottom: 20px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
}


.main-department-container .image-container {
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
}

.image-container img {
  /* width: 100%; */
  /* object-fit: cover; */
}



.main-department-container h2{
  font-size: 25px;
  padding: 10px 0;
}

.main-department-container p {
  font-size: 15px;
}

.department-card {
    color: var(--white);
    background: var(--green-theme);
    overflow: hidden;
}

/* departments */

.departments{
padding:60px 0;
text-align:center;
}

.dept-grid{
    /* display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px; */
}

.departments h1{
color:var(--green-theme);
font-size:36px;
margin-bottom:15px;
}

/* .description{
margin-bottom:40px;
} */

.department-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin: 20px 0;
}

.dept{
background:#d4d3d3;
padding:15px 10px;
border-radius:8px;
border: none;
font-weight:500;
cursor:pointer;
transition:0.3s ease-in;
width: 300px;
font-size: medium;
}

.dept:hover{
background:var(--green-theme);
color:white;
transform:scale(1.03);
}



/* tablet */

@media(max-width:992px){

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

.footer-grid{
grid-template-columns:1fr;
}

}


/* mobile */

@media(max-width:768px){

    .dept-grid{
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
    overflow: scroll;
}

/* nav{
position:absolute;
top:70px;
left:0;
right:0;
background:white;
flex-direction:column;
display:none;
padding:20px;
} */

/* nav.show{
display:flex;
} */

/* .menu-toggle{
display:block;
} */

.department-grid{
grid-template-columns:1fr;
}

.hero img{
height:160px;
}

.main-department-container{
    margin-bottom: 20px;
    grid-template-columns: repeat(1, 1fr);
}

}