.why-choose-us {
      text-align: center;
      padding: 70px 10%;
      background-color: #d1eef5;
    }

    .why-choose-us h2 {
      font-size: 30px;
      font-weight: bold;
      color: #1b2a41;
      margin-bottom: 50px;
      position: relative;
      display: inline-block;
    }

    .why-choose-us h2::after {
      content: "";
      position: absolute;
      width: 60%;
      height: 4px;
      background: #007bff;
      left: 20%;
      bottom: -12px;
      border-radius: 2px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
      justify-items: center;
    }

    .feature-card {
      position: relative;
      width: 100%;
      min-height: 250px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(40px);
    }

    .feature-card.show {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.6s ease;
    }

    .feature-card .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 70px;
      color: #fff;
      transition: 0.5s;
    }

    .feature-card:hover .icon {
      top: 20px;
      left: calc(50% - 40px);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      font-size: 35px;
    }

    .feature-card .content {
      position: absolute;
      top: 100%;
      height: calc(100% - 100px);
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
      transition: 0.5s;
    }

    .feature-card:hover .content {
      top: 100px;
    }

    .feature-card .content h3 {
      margin: 0 0 12px;
      font-size: 22px;
      color: #1b2a41;
    }

    .feature-card .content p {
      margin: 0;
      font-size: 15px;
      color: #444;
      line-height: 1.5em;
    }

    /* Different background colors for each card */
    .feature-card:nth-child(1) { background: #8dcf8f; }
    .feature-card:nth-child(1) .icon { background: #5c9a5e; }

    .feature-card:nth-child(2) { background: #d49da6; }
    .feature-card:nth-child(2) .icon { background: #c77784; }

    .feature-card:nth-child(3) { background: #afd7e0; }
    .feature-card:nth-child(3) .icon { background: #81becd; }

    .feature-card:nth-child(4) { background: #e1c397; }
    .feature-card:nth-child(4) .icon { background: #dab277; }

    .feature-card:nth-child(5) { background: #bfaedd; }
    .feature-card:nth-child(5) .icon { background: #a287e1; }

    .feature-card:nth-child(6) { background: #b1e1dd; }
    .feature-card:nth-child(6) .icon { background: #8cddd4; }

    .feature-card:nth-child(7) { background: #eab8c8; }
    .feature-card:nth-child(7) .icon { background: #d87ea5; }

    .feature-card:nth-child(8) { background: #b5d3ec; }
    .feature-card:nth-child(8) .icon { background: #8eb6e4; }

    /* Responsive */
    @media (max-width: 768px) {
      .why-choose-us h2 { font-size: 28px; }
      .feature-card .content h3 { font-size: 20px; }
    }

    @media (max-width: 480px) {
      .why-choose-us h2 { font-size: 24px; }
      .feature-card { min-height: 250px; }
    }