* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
    }

    .banner {
      background: url(../images/homekey.jpg) no-repeat center center/cover;
      height: 500px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
    }

    .banner::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6); /* Dark overlay */
      z-index: 1;
    }

    .banner-content {
      position: relative;
      z-index: 2;
    }

    .banner-content h1 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 6rem;
    }

    .breadcrumb {
      color: #fff;
      font-size: 16px;
    }

    .breadcrumb a {
      color: #FFD600;
      text-decoration: none;
      margin: 0 5px;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    @media (max-width: 600px) {
      .banner {
        height: 420px;
        padding: 20px;
      }

      .banner-content h1 {
        font-size: 28px;
      }

      .breadcrumb {
        font-size: 14px;
      }
    }

     .service-heading {
      text-align: center;
      padding: 60px 20px 40px;
      max-width: 800px;
      margin: 0 auto;
    }

    .service-heading .subtitle {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      display: inline-block;
      margin-bottom: 15px;
      color: #000;
    }

    .service-heading .subtitle::after {
      content: "";
      position: absolute;
      right: -40px;
      top: 50%;
      transform: translateY(-50%);
      width: 35px;
      height: 2px;
      background-color: #FFD600;
    }

    .service-heading h2 {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .service-heading p {
      color: #666;
      font-size: 16px;
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .service-heading h2 {
        font-size: 24px;
      }

      .service-heading p {
        font-size: 14px;
      }

      .service-heading .subtitle::after {
        width: 30px;
        right: -35px;
      }
    }

    .services-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .service-card {
      flex: 1 1 300px;
      max-width: 350px;
      background-color: #fff;
      padding: 30px 25px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      transition: all 0.3s ease-in-out ;
      border-radius: 6px;
    }

    .service-card.black {
      background-color: #000;
      color: #fff;
    }

    .service-icon {
      margin-bottom: 20px;
    }

    .service-icon img {
      height: 50px;
      width: 50px;
      object-fit: contain;
      filter: brightness(0) saturate(100%) invert(73%) sepia(98%) saturate(612%) hue-rotate(2deg) brightness(105%) contrast(102%);
    }

    .service-card.black .service-icon img {
      filter: brightness(0) invert(100%) sepia(100%) saturate(1000%) hue-rotate(20deg) brightness(110%) contrast(120%);
    }

    .service-card h3 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .service-card p {
      font-size: 15px;
      color: #666;
      margin-bottom: 20px;
    }

    .service-card.black p {
      color: #ccc;
    }

    .read-more {
      color: #FFD600;
      font-weight: bold;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      text-transform: uppercase;
      gap: 5px;
    }

    .read-more:hover {
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      .services-section {
        flex-direction: column;
        align-items: center;
        padding: 40px 15px;
      }

      .service-card {
        max-width: 100%;
      }
    }