.service-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.4s ease, color 0.4s ease;
    }

    .service-card::before {
      content: "";
      position: absolute;
      top: -100%;
      left: -100%;
      width: 200%;
      height: 200%;
      background: linear-gradient(135deg, rgba(255,165,0,0.3), rgba(255,140,0,0.3));
      transform: translateX(0) translateY(0);
      transition: transform 0.5s ease;
      z-index: 0;
    }

    .service-card:hover::before {
      transform: translateX(50%) translateY(50%);
    }

    .service-card:hover {
      transform: scale(1.05);
    }

    .service-card .card-heading {
      position: relative;
      z-index: 1;
      transition: color 0.4s ease;
    }

    .service-card:hover .card-heading {
      color: #ff6600; /* Orange heading on hover */
    }