/* Who We Are Card Hover Effect (like video/screenshot) */
.service-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s, background 0.3s, color 0.3s;
    position: relative;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-item:hover, .service-item:focus, .service-item.active {
    background: #15395a !important;
    box-shadow: 0 8px 32px rgba(21,57,90,0.18);
}

.service-item:hover .service-content, .service-item:focus .service-content, .service-item.active .service-content {
    color: #fff;
}

.service-item .service-content {
    color: #15395a;
    transition: color 0.3s;
}

.service-item:hover a.h4, .service-item:focus a.h4, .service-item.active a.h4 {
    color: #fff !important;
}

.service-item a.h4 {
    color: #15395a;
    transition: color 0.3s;
}

.service-item:hover i, .service-item:focus i, .service-item.active i {
    color: #fff !important;
    transition: color 0.3s;
}

.service-item i {
    color: #15395a;
    transition: color 0.3s;
}

@media (hover: none) and (pointer: coarse) {
  .service-item:active, .service-item:focus {
    background: #15395a !important;
    color: #fff;
  }
  .service-item:active .service-content, .service-item:focus .service-content {
    color: #fff;
  }
  .service-item:active a.h4, .service-item:focus a.h4 {
    color: #fff !important;
  }
  .service-item:active i, .service-item:focus i {
    color: #fff !important;
  }
}