.img-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .img-container {
    display: none;
  }
}

.card-container {
  transform: translateY(-50px);
}
.card-container .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 4px 8px #888;
}

@media (max-width: 768px) {
  .card-container {
    transform: translateY(0);
    padding-top: 2rem;
  }
}

.image-box {
  width: 100%;
}
.image-box img {
  width: 100%;
  -webkit-mask-image: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CiAgICAgICAgICAgICAgPHN2ZyBpZD0ic3ctanMtYmxvYi1zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgICAgICAgICAgICAgICAgICAgPGRlZnM+IAogICAgICAgICAgICAgICAgICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN3LWdyYWRpZW50IiB4MT0iMCIgeDI9IjEiIHkxPSIxIiB5Mj0iMCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBpZD0ic3RvcDEiIHN0b3AtY29sb3I9InJnYmEoOTQsIDEzOCwgNDMsIDEpIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBpZD0ic3RvcDIiIHN0b3AtY29sb3I9InJnYmEoMjA3LCAyNTUsIDE3NiwgMSkiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgICAgICAgICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgICAgICAgICAgICAgIDwvZGVmcz4KICAgICAgICAgICAgICAgIDxwYXRoIGZpbGw9InVybCgjc3ctZ3JhZGllbnQpIiBkPSJNMTkuOSwtMjMuOUMyNi45LC0xNy45LDM0LjMsLTEyLjYsMzgsLTQuOEM0MS42LDMuMSw0MS41LDEzLjUsMzYuNSwyMEMzMS41LDI2LjYsMjEuNiwyOS4zLDExLjgsMzMuMUMyLjEsMzYuOCwtNy40LDQxLjYsLTE2LjUsNDAuNEMtMjUuNiwzOS4zLC0zNC40LDMyLjEsLTM5LjQsMjNDLTQ0LjMsMTMuOSwtNDUuNSwyLjgsLTQzLjIsLTcuMkMtNDEsLTE3LjIsLTM1LjMsLTI2LjIsLTI3LjUsLTMyQy0xOS43LC0zNy44LC05LjgsLTQwLjUsLTEuNywtMzguNUM2LjUsLTM2LjUsMTMsLTI5LjgsMTkuOSwtMjMuOVoiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSIgc3Ryb2tlLXdpZHRoPSIwIiBzdHlsZT0idHJhbnNpdGlvbjogMC4zczsiIHN0cm9rZT0idXJsKCNzdy1ncmFkaWVudCkiPjwvcGF0aD4KICAgICAgICAgICAgICA8L3N2Zz4=);
  -webkit-mask-repeat: no-repeat;
}

.community{
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: url(../SRC/employment.webp);
    position: relative;
    background-size: cover;
    background-position-y: -100px;
    z-index: -3;
    display: flex;
    align-items: center;
}

.bg-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(123, 195, 66, 0.7) ,rgba(123, 195, 66, 0.4),rgba(123, 195, 66, 0.1));
    z-index: -2;
}
.community .container-fluid{
    z-index: 999;
    color: #fff;
    z-index: 200;
}

.projects .card{
    transform: translateY(-50px);
}
@media (max-width:768px) {
    .projects .card{
        transform: translateY(0);
    }
    .community{
        background-position-y:0px ;
    }
   .projects .first{
        margin-top: 30px;
    }
    .projects .last{
        margin-bottom: 30px;
    }
}